<template>
  <div class="personalCenter">
    <div class="userInfo">
      <van-row align="center" justify="space-between">
        <van-col>
          <van-row align="center" gutter="10">
            <van-col>
              <van-image round width="5rem" height="5rem" :src="person?.avatar" />
            </van-col>
            <van-col
              ><div class="nickname">{{ curStudent?.username }}</div></van-col
            >
          </van-row>
        </van-col>

        <van-col class="yellow">
          <van-row justify="center"> <van-icon name="star-o" size="1.5rem" /></van-row>
          <van-row justify="center" @click="myStar">收藏</van-row>
        </van-col>
      </van-row>
      <div class="card" @click="studentProfile">
        <div class="profile">
          <van-row gutter="18" align="top">
            <van-col class="name">{{ curStudent?.username }}</van-col>
            <van-col
              ><div class="grade">
                {{ classFormat[curStudent?.class] }}
              </div></van-col
            >
          </van-row>
          <van-row>
			<div class="expirae">
              <span>会员有效期：</span>{{ curStudent?.createtime }}
           	 </div>
		   </van-row>
        </div>
        <div class="detail">学员档案 ></div>
      </div>
    </div>
    <div></div>

    <main
      class="mainContainer"
      style="
        height: auto;
        background: linear-gradient(
          90deg,
          rgb(254, 243, 239) 0%,
          #fff 10%,
          #fff 70%,
          #fff,
          #eefff7
        );
      "
    >
      <van-row justify="center" class="top">
        <div @click="myIntegral" class="pl">
          积分变动明细<br /><span>{{ thisCount.cont }}</span>
        </div>
      </van-row>
      <van-row justify="center" class="center">
        <div @click="giftOrders">
          <van-icon name="bill" size="2.2rem" color="#FE6A00" /><br /><span>礼盒订单</span>
        </div>
        <div @click="integralOrder">
          <van-icon name="bag" size="2.2rem" color="gold" /><br /><span>积分订单</span>
        </div>
        <div @click="couponCenter">
          <van-icon name="coupon" size="2.2rem" color="#A980F8" /><br /><span>优惠券</span>
        </div>
        <div @click="counselingCenter">
          <van-icon name="fire" size="2.2rem" color="blue" /><br /><span>咨询中心</span>
        </div>
      </van-row>
      <div style="height: 10vh; background: -webkit-linear-gradient(left, #fef6f4, #f6fffb)"></div>

      <div style="height: 28vh; background: -webkit-linear-gradient(left, #fef6f4 10%, #f6fffb)">
        <van-row justify="center" gutter="5" align="center">
          <van-col><van-icon name="service-o" size="25px" /></van-col>
          <van-col class="tels">服务热线电话：</van-col>
        </van-row>
        <van-row justify="center" class="tel">021-65370089</van-row>
      </div>
      <!--  -->
    </main>
  </div>
</template>
<script setup>
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入storeToRefs函数，从'pinia'库中
import { useRouter } from 'vue-router'  // 导入useRouter函数，从'vue-router'库中

const userInfoStore = useUserInfoStore()  // 使用useUserInfoStore函数创建userInfoStore对象
const { person, curStudent, classFormat, thisCount } = storeToRefs(userInfoStore)  // 使用storeToRefs函数将userInfoStore对象的属性解构为响应式对象
const router = useRouter()  // 使用useRouter函数创建router对象

//我的收藏
async function myStar() {
  router.push('/myStar')
}
//学员档案
async function studentProfile() {
  router.push('/studentProfile')
}
//我的积分
async function myIntegral() {
  router.push('/myIntegral')
}
//礼盒订单
async function giftOrders() {
  router.push('/giftOrders')
}
//积分订单
async function integralOrder() {
  router.push('/integralOrder')
}
//优惠券中心
async function couponCenter() {
  router.push('/couponCenter')
}
//咨询中心
async function counselingCenter() {
  router.push('/counselingCenter')
}
</script>
<style scoped lang="less">
@var1: #ffffff;
@var2: #f5f3f2;
@var3: #6bd8e6;
@var4: #ffc456;
@var5: #3fccdf;
@var6: #fffffe;
@var7: #e4e2e2;
@var8: #fefefd;
@var9: #ffc559;
@var10: #cff2f6;
@var11: #44cee0;
@var12: #46cee0;
@var13: #ffffff;
@var14: #7acc91;
.pl{
	// background-color: red;
	padding-left: 20vw;
}
.top {
	display: flex;
	justify-content: space-around;
	text-align: center;
	background-color: @var1;
	padding: 1.5vh 0;
	border-radius: 8px;
	box-shadow: 1px 5px 3px @var2;
	> div:first-child {
		// border-right: #eeeeee 1px solid;
		padding-right: 20%;
		> span {
			color: @var4;
			// line-height: 30px;
		}
	}
	> div:last-child > span::after {
		content: '>';
		color:@var3;
	}
	> div {
		font-weight: 900;
		font-family: '微软雅黑';
		&:last-child > span {
			color: @var3;
			font-size: 14px;
			line-height: 30px;
		}
	}
}
.center {
	background-color: @var5;
	display: flex;
	justify-content: space-around;
	text-align: center;
	font-size: 15px;
	font-weight: 900;
	background-color: @var6;
	padding: 2.5vh 0;
	padding-bottom: 1vh;
	border-radius: 8px;
	box-shadow: 1px 2px 5px @var7;
	margin-top: 3vh;
	margin-bottom: 0.5vh;
	span {
		line-height: 40px;
	}
}
.personalCenter {
	background-color: @var8;
}
.tel {
	color: @var9;
	font-weight: 900;
	font-size: 20px;
	margin-top: 1vh;
}
.tels {
	font-size: 18px;
}
.userInfo {
	background: linear-gradient(
    to right top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 0%,
    rgba(227, 250, 252, 1) 100%
  );
	width: 100vw;
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
}
.nickname {
	font-size: 18px;
	font-weight: 900;
}
.yellow {
	color: @var4;
}
.card {
	margin: 1em 0;
	height: 4.5rem;
	width: 100%;
	background: linear-gradient(90deg, rgba(77, 217, 187, 1) 0%, rgba(63, 204, 223, 1) 100%);
	border-radius: 7px;
	display: flex;
	justify-content: space-between;
	padding-right: 5px;
	.detail {
		transform: translate(0, 0.1rem);
		margin: 1.3em 0;
		background-color: @var10;
		color: @var11;
		padding: 3px 12px;
		border-radius: 20px;
		font-size: 15px;
		display: grid;
		place-content: center;
	}
	.profile {
		background-color: rgba(243, 253, 251, 0.65);
		background: -webkit-linear-gradient(top, #B0ECEB,#eef8f8);
		transform: translate(0.7rem, 0.9rem);
		border-radius: 7px 15px 7px 7px;
		padding: 10px 13px;
		box-sizing: border-box;
		width: 63.5%;
		.name {
			color: @var12;
			font-weight: bold;
			margin-bottom: 0.7em;
			font-size: 17px;
		}
		.grade {
			margin-bottom: 0.7em;
			background-color: @var5;
			color: @var13;
			padding: 3px 10px;
			font-size: 12px;
			border-radius: 10px;
			
		}
		.expirae {
			color: @var14;
			font-size: 14px;
			span {
				font-size: 14px;
			}
		}
	}
}
@media( min-width: 1024px) {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

</style>
